<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 剪贴板操作 navigator.clipboard -->
    <h1>复制页面文本内容</h1>
    <p style="width: 400px" class="content-1">
      既然让我说几句呢，那我就说几句啊。也是想了想啊，说哪几句呢，那我就说这几句。那么我相信啊，这几句呢，嗯也是比那几句强。所以我今天呢，就先说这几句。那么如果大家觉得啊说这几句不够全面啊，将来呢再给我补充几句。我总结呢，就是三点。这第一点呢，第一点啊，按咱们说最重要的是第二点。这第二点呀，我们说听完了以后让大家感觉，是不是，问，这，当然了，应该说今天最有重量的啊是第三点，那么这第三点，他是什么呢。我们讲第三对不对，又表明了对不对，那么刚才呢，我已经讲的非常明白。我相信啊，大家呢也应该很明白。
    </p>
    <button>一键复制上述内容</button>
    <button class="btn-show">展示剪切板上的文字信息</button>
    <script>
      //  document.oncopy = function(e) {
      //     console.log(e);
      //     console.log('触发copy事件，复制')
      //  }
       document.onpaste = async function() {
          console.log('触发paste粘贴事件');
          const val = await navigator.clipboard.read();
          const item = val[0];
          const types = item.types;
          types.forEach(async type => {
           const blob =  await item.getType(type);
           const fr = new FileReader();
           fr.onload = function(e) {
            console.log(e.target.result);
           }
           fr.readAsText(blob);
          });

       }
      //  document.oncut = function() {
      //     console.log('触发cut事件')
      //  }
      const btn = document.querySelector("button");
      const btnShow = document.querySelector(".btn-show");
      const content = document.querySelector(".content-1");
    //   btn.onclick = async function () {
    //     const val = content.innerText;
    //     await navigator.clipboard.writeText(val);
    //     alert("复制成功");
    //   };
    //   btnShow.onclick = async function () {
    //     try {
    //       const val = await navigator.clipboard.readText();
    //       alert(val);
    //     } catch (error) {
    //       console.log(error);
    //     }
    //   };
    </script>
  </body>
</html>
